<template>
  <div class="aui-content">
    <ul class="aui-list aui-list-in" style="background-image: none">
      <div class="aui-he"></div>
      <li class="aui-list-item" style="background-image: none">
        <div class="aui-list-item-inner">
          <div class="aui-list-item-title aui-black">头像</div>
          <div class="aui-list-item-right">
            <div>
              <img
                src="../static/picture/user_defalut_avatar2.png"
                class="aui-img-round"
                style="width: 30px"
              />
            </div>
          </div>
        </div>
      </li>
      <div class="aui-he"></div>
      <li class="aui-list-item" style="background-image: none">
        <div class="aui-list-item-inner">
          <div class="aui-list-item-title aui-black">昵称</div>
          <div class="aui-list-item-right">
            <input
              type="text"
              placeholder="输入您的昵称"
              v-model="currentUser.username"
            />
          </div>
        </div>
      </li>
      <div class="aui-he"></div>
      <li class="aui-list-item" style="background-image: none">
        <div class="aui-list-item-inner">
          <div class="aui-list-item-title aui-black">修改密码</div>
          <div class="aui-list-item-right">
            <input
              type="text"
              placeholder="输入您的新密码"
              v-model="currentUser.password"
            />
          </div>
        </div>
      </li>
      <div class="aui-he"></div>
    </ul>
    <div
      class="aui-padded-15 aui-list-item-inner aui-list-item-center aui-card-list-footer"
    >
      <div
        @click="submit"
        class="aui-btn aui-btn-block aui-btn-sm aui-btn-danger"
      >
        确认修改
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getterTypes } from "@/store/modules/auth";
import { actionTypes as authActionTypes } from "@/store/modules/auth";

export default {
  computed: {
    ...mapGetters({
      currentUser: getterTypes.currentUser,
    }),
  },
  methods: {
    submit() {
      let currentUser = this.currentUser;
      console.log("currentUserInput--", currentUser);
      this.$store
        .dispatch(authActionTypes.updateCurrentUser, currentUser)
        .then(() => {
          this.$router.replace("/login");
        });
    },
  },
};
</script>

<style>
.aui-list-item input {
  text-align: right;
  font-size: 0.6rem;
}
</style>